<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>JavaScript control example</title>
</head>
<style>
    body {
        background-color: #FFFFFF;
        font-family: Arial;
        font-size: 12px;
    }
</style>
<body>
<b><font color="red">Attention! Because of security restrictions in most cases this
    example will work only if you upload files to your web server.</font></b><br><br>
<!-- saved from url=(0013)about:internet -->
<!-- amline script-->
<script type="text/javascript" src="../../amline/swfobject.js"></script>
<div id="flashcontent">
    <strong>You need to upgrade your Flash Player</strong>
</div>

<script type="text/javascript">
    var so = new SWFObject("../../amline/amline.swf", "amline", "520", "400", "8", "#FFFFFF");
    so.addVariable("path", "../../amline/");
    so.addVariable("chart_id", "amline"); // if you have more then one chart in one page, set different chart_id for each chart
    so.addVariable("settings_file", encodeURIComponent("amline_settings.xml"));
    so.addVariable("data_file", encodeURIComponent("amline_data.xml"));
    so.addVariable("preloader_color", "#999999");
    so.write("flashcontent");
</script>
<!-- end of amline script -->


<script type="text/javascript">
    //////////////////////////////////////////////////////////////////////////////////////////
    // Functions that control the chart //////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////

    // SET DATA //////////////////////////////////////////////////////////////////////////////
    // flashMovie.setData(data, rebuild)
    // This function can be used for setting the chart's data on the fly.
    // Data must be in CSV or XML form, as per the <data_type> setting.
    // The "rebuild" parameter is optional and can be "true" or "false". "false" means that
    // the new data will not be applied right after this function is called.

    function setData() {
        // gets data from the text area with id "data"
        var data = document.getElementById("data").value;
        // sets data
        flashMovie.setData(data);
    }

    // APPEND DATA ///////////////////////////////////////////////////////////////////////////
    // flashMovie.appendData(data[, remove_count])
    // This function can be used to append new data to the existing dataset.
    // The data must be in CSV or XML form, as per the <data_type> setting.
    // The remove_count variable is optional and sets the number of data points
    // that should be removed from the beginning of dataset.
    function appendData() {
        // gets data from the text area with id "data"
        var data = document.getElementById("data").value;
        // appends data
        flashMovie.appendData(data, 0);
    }

    // SET SETTINGS //////////////////////////////////////////////////////////////////////////
    // flashMove.setSettings(settings[, rebuild])
    // This function can be used to set some part or all the settings. The settings should be
    // in XML format, inside <settings></settings>. The "rebuild" parameter is optional and
    // can be "true" or "false". "false" means that the new settings will not be applied right
    // after this function is called. They will can be applied using flashMovie.rebuild()
    // function or by adding some more setings with the "rebuild" set to "true". The default
    // value of "rebuild" is "true"
    function setSettings() {
        var settings = document.getElementById("settings").value;
        flashMovie.setSettings(settings, true);
    }

    // REBUILD CHART /////////////////////////////////////////////////////////////////////////
    // flashMovie.rebuild();
    // This function might be used to rebuild the chart after several portions of settings were
    // set using setSettings(settings, rebuild) function, with the rebuild set to false
    function rebuild() {
        flashMovie.rebuild();
    }

    // RELOAD DATA ///////////////////////////////////////////////////////////////////////////
    // flashMove.reloadData([file_name], [show_all])
    // This function will reload the data. The file_name variable is optional, if you do not
    // set it here, data from the original file will be reloaded. The show_all variable
    // tells the chart whether it should keep the selected period or show full new data
    // the default value of show_all is "true"
    function reloadData() {
        flashMovie.reloadData();
    }

    // RELOAD SETTINGS ///////////////////////////////////////////////////////////////////////
    // flashMovie.reloadSettings([file_name], [show_all])
    // This function will reload the settings. The file_name variable is optional, if you do
    // not set it here, settings from the original file will be reloaded. The show_all variable
    // tells the chart whether it should keep the selected period or show full new data
    // the default value of show_all is "true"
    function reloadSettings() {
        flashMovie.reloadSettings();
    }

    // RELOAD ALL ////////////////////////////////////////////////////////////////////////////
    // flashMovie.reloadAll([data_file_name][,settings_file_name])
    // This function will reload both data and settings. The names of the files are optional.
    // If you do not set them, the original file names will be used.
    function reloadAll() {
        flashMovie.reloadAll();
    }

    // SET PARAM /////////////////////////////////////////////////////////////////////////////
    // flashMovie.setParam(param, value)
    // This function lets you change a single setting. The parameter names are formed using
    // the section name and the parameter name, separated with a period. For example:
    // background.alpha or labels.label[1].text
    function setParam() {
        // gets param name from a field with id "param"
        var param = document.getElementById("param").value;
        // gets param value from a field with id "value"
        var value = document.getElementById("value").value;
        // sets param
        flashMovie.setParam(param, value);
    }

    // GET PARAM /////////////////////////////////////////////////////////////////////////////
    // flashMovie.getParam(param)
    // This function will ask Flash to return the value of a setting. The parameter name is
    // formed in the same way as the setParam function (described above). When you call this
    // function to return the setting value, Flash will return the value by calling the
    // amReturnParam(chart_id, param_value, param_name) function
    function getParam() {
        // get the param name from a field with id "getparam"
        var param = document.getElementById("getparam").value;
        flashMovie.getParam(param);
    }

    // GET DATA //////////////////////////////////////////////////////////////////////////////
    // flashMovie.getData()
    // This function will ask Flash to return the whole data. When you call this function to
    // return the data, Flash will call the amReturnData(chart_id, data) function.
    function getData() {
        flashMovie.getData();
    }

    // GET SETTINGS //////////////////////////////////////////////////////////////////////////
    // flashMovie.getSettings()
    // This function will ask Flash to return the whole settings XML. When you call this
    // function to return the settings, Flash will call the
    // amReturnSettings(chart_id, settings) function.
    function getSettings() {
        flashMovie.getSettings();
    }

    // EXPORT AS IMAGE ///////////////////////////////////////////////////////////////////////
    // flashMovie.exportImage([file_name])
    // This function will start the process of exporting the chart as an image. The file_name
    // is a name of a file to which image data will be posted (files provided in the download
    // package are export.php and export.aspx). The file_name is optional and can be set in
    // the <export_as_image><file> setting.
    function exportImage() {
        flashMovie.exportImage('../../amline/export.php');
    }

    // PRINT /////////////////////////////////////////////////////////////////////////////////
    // flashMovie.print()
    // This function will print the chart. Use this print function if you don't have any
    // values rotated by 90 degrees, also if you don't have a custom bitmap background.
    function print() {
        flashMovie.print();
    }

    // PRINT AS BITMAP ///////////////////////////////////////////////////////////////////////
    // flashMovie.printAsBitmap()
    // Use it if you have values rotated by 90 degrees and/or a custom bitmap background.
    function printAsBitmap() {
        flashMovie.printAsBitmap();
    }

    // Line chart specific functions //////////////////////////////////////////////////////////

    // SHOW GRAPH /////////////////////////////////////////////////////////////////////////////
    // flashMovie.showGraph(index)
    // This function will show the graph (if it is hidden). Index is the sequential number of a
    // graph in your settings, counting from 0.
    function showGraph() {
        var index = document.getElementById("graphshow").value;
        flashMovie.showGraph(index);
    }

    // HIDE GRAPH ////////////////////////////////////////////////////////////////////////////
    // flashMovie.hideGraph(index)
    // This function will hide the graph (if it is visible). Index is the sequential number of
    // a graph in your settings, counting from 0.
    function hideGraph() {
        var index = document.getElementById("graphhide").value;
        flashMovie.hideGraph(index);
    }

    // SELECT GRAPH //////////////////////////////////////////////////////////////////////////
    // flashMovie.selectGraph(index)
    // This function will select the graph (the value balloon will become visible). Index is
    // the sequential number of a graph in your settings, counting from 0.
    function selectGraph() {
        var index = document.getElementById("graphselect").value;
        flashMovie.selectGraph(index);
    }

    // DESELECT GRAPH ////////////////////////////////////////////////////////////////////////
    // flashMovie.deselectGraph(index)
    // This function will deselect the graph (the value balloon will become invisible).
    // Index is the sequential number of a graph in your settings, counting from 0.
    function deselectGraph() {
        var index = document.getElementById("graphdeselect").value;
        flashMovie.deselectGraph(index);
    }

    // SET ZOOM //////////////////////////////////////////////////////////////////////////////
    // flashMovie.setZoom(from, to)
    // This function will change the selected period. "From" and "to" values must match the
    // values of the series in the data file, otherwise an error message will be displayed.
    function setZoom() {
        var from = document.getElementById("from").value;
        var to = document.getElementById("to").value;
        flashMovie.setZoom(from, to);
    }

    // SHOW ALL //////////////////////////////////////////////////////////////////////////////
    // flashMovie.showAll();
    // This function will show the full chart if some shorter period was previously selected.
    function showAll() {
        flashMovie.showAll();
    }

    //////////////////////////////////////////////////////////////////////////////////////////
    // Functions that are called by the chart ////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////

    // CHART INITED //////////////////////////////////////////////////////////////////////////
    // amChartInited(chart_id)
    // This function is called when the chart is fully loaded and initialized.
    function amChartInited(chart_id) {
        // get the flash object into "flashMovie" variable
        flashMovie = document.getElementById(chart_id);
        // tell the field with id "chartfinished" that this chart was initialized
        document.getElementById("chartfinished").value = chart_id;
    }

    // PROCESS COMPLETED //////////////////////////////////////////////////////////////////////////
    // amProcessCompleted(chart_id, process_name)
    // This function is called when the chart finishes doing some task triggered by another
    // JavaScript function
    function amProcessCompleted(chart_id, process_name) {
        document.getElementById("processcompleted").value = process_name;
    }

    // RETURN DATA ///////////////////////////////////////////////////////////////////////////
    // amReturnData(chart_id, data)
    // This function is called when you request data from a chart
    //  by calling the flashMove.getData() function.
    function amReturnData(chart_id, data) {
        document.getElementById("data").value = unescape(data);
    }

    // RETURN PARAM //////////////////////////////////////////////////////////////////////////
    // amReturnParam(chart_id, value, param_name)
    // This function is called when you request a setting from a chart
    // by calling the flashMovie.getParam(param) function.
    function amReturnParam(chart_id, value, param_name) {
        document.getElementById("returnedparam").value = unescape(value);
    }

    // RETURN SETTINGS ///////////////////////////////////////////////////////////////////////
    // amReturnSettings(chart_id, settings)
    // This function is called when you request settings from a chart
    // by calling flashMovie.getSettings() function.
    function amReturnSettings(chart_id, settings) {
        document.getElementById("settings").value = unescape(settings);
    }

    // RETURN IMAGE DATA /////////////////////////////////////////////////////////////////////
    // amReturnImageData(chart_id, data)
    // This function is called when the export to image process is finished and might be used
    // as alternative way to get image data (instead of posting it to some file)
    function amReturnImageData(chart_id, data) {
        // your own functions here
    }

    // ERROR /////////////////////////////////////////////////////////////////////////////////
    // amError(chart_id, message)
    // This function is called when an error occurs, such as no data, or file not found.
    function amError(chart_id, message) {
        alert(message);
    }

    // GET ZOOM //////////////////////////////////////////////////////////////////////////////
    // amGetZoom(chart_id, from, to, from_xid, to_xid)
    // This function is called when the selected period is changed.
    function amGetZoom(chart_id, from, to, from_xid, to_xid) {
        document.getElementById("from").value = from;
        document.getElementById("to").value = to;
    }

    // FIND OUT WHICH GRAPH WAS SELECTED /////////////////////////////////////////////////////
    // amGraphSelect(chart_id, index, title)
    // This function is called when the viewer selects the graph by clicking on it or on the
    // graph's legend entry. Index is the sequential number of a graph in your settings,
    // counting from 0.
    function amGraphSelect(chart_id, index, title) {
        document.getElementById("graphselect").value = index;
    }

    // FIND OUT WHICH GRAPH WAS DESELECTED ///////////////////////////////////////////////////
    // amGraphDeselect(chart_id, index, title)
    // This function is called when the viewer deselects the graph by clicking on it or on the
    // graph's legend entry. Index is the sequential number of a graph in your settings,
    // counting from 0.
    function amGraphDeselect(chart_id, index, title) {
        document.getElementById("graphdeselect").value = index;
    }

    // FIND OUT WHICH GRAPH WAS HIDDEN ///////////////////////////////////////////////////////
    // amGraphHide(chart_id, index, title)
    // This function is called when the viewer hides the graph by clicking on the checkbox in
    // the legend. Index is the sequential number of a graph in your settings, counting from 0
    function amGraphHide(chart_id, index, title) {
        document.getElementById("graphhide").value = index;
    }

    // FIND OUT WHICH GRAPH WAS SHOWN ///////////////////////////////////////////////////////
    // amGraphShow(chart_id, index, title)
    // This function is called when the viewer shows the graph by clicking on the checkbox in
    // the legend. Index is the sequential number of a graph in your settings, counting from 0
    function amGraphShow(chart_id, index, title) {
        document.getElementById("graphshow").value = index;
    }

    // FIND CURRENTLY HOVERED SERIES ////////////////////////////////////////////////////////
    // amRolledOverSeries(chart_id, series)
    // This function is called when the viewer moves the mouse over the plot area. It returns
    // the value of the series over which the mouse is currently hovered.
    function amRolledOverSeries(chart_id, series) {
        document.getElementById("series_hover").value = series;
    }

    // FIND WHICH SERIES WAS CLICKED ////////////////////////////////////////////////////////
    // amClickedOnSeries(chart_id, series)
    // This function is called when the viewer clicks somewhere on the plot area. It returns
    // the value of the series over which the mouse hovered when it was clicked.
    function amClickedOnSeries(chart_id, series) {
        document.getElementById("series_clicked").value = series;
    }

    // FIND WHICH BULLET WAS CLICKED ////////////////////////////////////////////////////////
    // amClickedOnBullet(chart_id, graph_index, value, series, url, description)
    // This function is called when the viewer clicks on a graph bullet. It returns the
    // sequential number of a graph (graph_index), the value of the data point (value),
    // the series value (series), the URL and the description attributes.
    function amClickedOnBullet(chart_id, graph_index, value, series, url, description) {
        document.getElementById("bullet_clicked").value = value;
    }

    // FIND WHICH BULLET WAS HOVERED ////////////////////////////////////////////////////////
    // amRolledOverBullet(chart_id, graph_index, value, series, url, description)
    // This function is called when the viewer rolls over a graph bullet. It returns the
    // sequential number of a graph (graph_index), the value of the data point (value),
    // the series value (series), the URL and the description attributes.
    function amRolledOverBullet(chart_id, graph_index, value, series, url, description) {
        document.getElementById("bullet_hover").value = value;
    }


    //////////////////////////////////////////////////////////////////////////////////////////
    // this is example function which is called from right-click menu ////////////////////////
    function selectInterval(interval) {
        flashMovie.setZoom(2006 - interval, 2006);
    }


</script>


<!-- Buttons and forms -->

<form>
    <hr noshade size="1">
    Chart initialized: <input type="text" id="chartfinished">
    Process completed: <input type="text" id="processcompleted">
    <hr noshade size="1">

    <input type="button" value="reload Data" onclick="reloadData();"/>
    <input type="button" value="reload Settings" onclick="reloadSettings();"/>
    <input type="button" value="reload All" onclick="reloadAll();"/>
    <hr noshade size="1">

    <input type="button" value="export image" onclick="exportImage();"/>
    <input type="button" value="print" onclick="print();"/>
    <input type="button" value="print as bitmap" onclick="printAsBitmap();"/>
    <hr noshade size="1">

    Indicator is on:<input type="text" id="series_hover">
    Clicked on series:<input type="text" id="series_clicked">
    <hr noshade size="1">

    Rolled over bullet:<input type="text" id="bullet_hover">
    Clicked on bullet:<input type="text" id="bullet_clicked">
    <hr noshade size="1">

    <textarea id="data" rows="6" cols="62"></textarea><br>
    <input type="button" value="Get data" onclick="getData();"/>
    <input type="button" value="Set Data" onclick="setData();"/>
    <input type="button" value="Append Data" onclick="appendData();"/>
    <hr noshade size="1">

    Param: <input type="text" id="param" value="graphs.graph[0].hidden"/>
    Value: <input type="text" id="value" value="true"/>
    <input type="button" value="set param" onclick="setParam();"/>
    <hr noshade size="1">

    Param: <input type="text" id="getparam" value="axes.x.width">
    Value: <input type="text" id="returnedparam"/>
    <input type="button" value="get param" onclick="getParam();"/>
    <hr noshade size="1">

    Zoom from: <input type="text" id="from"/>
    to: <input type="text" id="to"/>
    <input type="button" value="set zoom" onclick="setZoom();"/>
    <input type="button" value="show all" onclick="showAll();"/>
    <hr noshade size="1">

    Select:<input type="text" id="graphselect" value="0"/>
    <input type="button" value="select" onclick="selectGraph();"/>
    Deselect:<input type="text" id="graphdeselect" value="0"/>
    <input type="button" value="deselect" onclick="deselectGraph();"/>
    <hr noshade size="1">

    Show:<input type="text" id="graphshow" value="1"/>
    <input type="button" value="show" onclick="showGraph();"/>
    Hide:<input type="text" id="graphhide" value="1"/>
    <input type="button" value="hide" onclick="hideGraph();"/>
    <hr noshade size="1">

    <textarea id="settings" rows="6" cols="62"></textarea><br>
    <input type="button" value="Get settings" onclick="getSettings();"/>
    <input type="button" value="Set settings" onclick="setSettings();"/>
    <input type="button" value="Rebuild" onclick="rebuild();"/>
    <hr noshade size="1">

</form>

Right-click on the chart - you will see custom menu items. These items are configurable - you can assign custom
JavaScript functions to them.

</body>
</html>
